@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .transition-height {
    transition: max-height 0.3s ease-in-out;
  }
  .bg-gradient-primary {
    background: linear-gradient(135deg, #165DFF 0%, #722ED1 100%);
  }
}

/* 基础动画效果 */
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.slide-in {
  animation: slideIn 0.3s ease-in-out;
}

@keyframes slideIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 表单元素焦点状态 */
input:focus, select:focus, textarea:focus {
  @apply ring-2 ring-primary/30 border-primary;
}

/* 按钮悬停效果增强 */
button:hover {
  @apply transform -translate-y-0.5;
}

/* 步骤指示器样式 */
li[data-step].active-step div {
  @apply bg-primary text-white;
}

li[data-step].completed-step div {
  @apply bg-success text-white;
}

/* 手风琴效果 */
.accordion-header.active i {
  @apply transform rotate-180;
}

/* 卡片悬停效果 */
.card-hover-effect {
  @apply transition-all duration-300 hover:shadow-card-hover hover:-translate-y-1;
}

/* 加载状态动画 */
.loading-skeleton {
  @apply bg-neutral-200 animate-pulse rounded;
}

/* 表格行悬停效果 */
tbody tr:hover {
  @apply bg-neutral-50 transition-colors;
}

/* 导航链接激活状态 */
.nav-link.active {
  @apply text-primary border-b-2 border-primary;
}

/* 自定义滚动条 */
.custom-scrollbar::-webkit-scrollbar {
  @apply w-2;
}

.custom-scrollbar::-webkit-scrollbar-track {
  @apply bg-neutral-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  @apply bg-neutral-300 rounded-full hover:bg-neutral-400 transition-colors;
}

/* 模态框背景 */
.modal-backdrop {
  @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center opacity-0 pointer-events-none transition-opacity duration-300;
}

.modal-backdrop.active {
  @apply opacity-100 pointer-events-auto;
}

/* 模态框内容 */
.modal-content {
  @apply bg-white rounded-xl shadow-lg w-full max-w-lg mx-4 transform scale-95 transition-transform duration-300;
}

.modal-backdrop.active .modal-content {
  @apply transform scale-100;
}

/* 通知提示样式 */
.notification {
  @apply fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg transform translate-x-full transition-transform duration-300 max-w-sm;
}

.notification.show {
  @apply transform translate-x-0;
}

.notification.success {
  @apply bg-success/10 border border-success text-success;
}

.notification.error {
  @apply bg-danger/10 border border-danger text-danger;
}

.notification.warning {
  @apply bg-warning/10 border border-warning text-warning;
}

.notification.info {
  @apply bg-primary/10 border border-primary text-primary;
}
    